<div class="alert alert-success" role="alert">
  您正在<strong>新增模板</strong>！
  <button class="btn btn-default btn-bor-success back-to-list" type="button" (click)="$event.view.history.back()">返回列表
  </button>
</div>

<div>
  <form #addTemplateForm="ngForm">
    <div class="form-group row">
      <div class="form-title">模板名称</div>
      <div class="col-md-6">
        <input type="text" class="form-control" name="name" #name="ngModel" [(ngModel)]="addTemplate.name" required>
        <p [hidden]="name.pristine || name.valid" class="alert alert-danger">模板名称不能为空!</p>
      </div>
    </div>
    <div class="form-group row">
      <div class="form-title">微信端模板编码</div>
      <div class="col-md-6">
        <input type="number" class="form-control" name="wx_template_id" #wx_template_id="ngModel" [(ngModel)]="addTemplate.wx_template_id" required>
        <p [hidden]="wx_template_id.pristine || wx_template_id.valid" class="alert alert-danger">不能为空!</p>
      </div>
    </div>
    <div class="form-group row">
      <div class="form-title">版本号</div>
      <div class="col-md-6">
        <input type="text" class="form-control" name="current_version" #current_version="ngModel" [(ngModel)]="addTemplate.current_version" required>
        <p [hidden]="current_version.pristine || current_version.valid" class="alert alert-danger">不能为空!</p>
      </div>
    </div>
    <div class="form-group row">
      <div class="form-title">版本描述</div>
      <div class="col-md-6">
        <input type="text" class="form-control" name="current_version_desc" #current_version_desc="ngModel" [(ngModel)]="addTemplate.current_version_desc" required>
        <p [hidden]="current_version_desc.pristine || current_version_desc.valid" class="alert alert-danger">不能为空!</p>
      </div>
    </div>
    <div class="form-group row">
      <div class="form-title">模板类型</div>
      <div class="col-md-6">
        <select name="templateType" class="form-control width-control" name="category_id" [(ngModel)]="addTemplate.category_id">
          <option value="{{item.id}}" *ngFor="let item of typeList">{{item.name}}</option>
        </select>
      </div>
    </div>
    <div class="form-group row">
      <div class="form-title">模板描述</div>
      <div class="col-md-6">
        <input type="text" class="form-control" name="describe" [(ngModel)]="addTemplate.describe">
      </div>
    </div>
    <div class="form-group row">
      <div class="form-title">是否为默认模板</div>
      <div class="col-md-6">
        <input type="radio" name="isDefault" id="no" [checked]="!addTemplate.default" (click)="addTemplate.default = 0"><label class="mr" for="no">否</label>
        <input type="radio" name="isDefault" id="yes" [checked]="!!addTemplate.default" (click)="addTemplate.default = 1"><label class="mr" for="yes">是</label>
      </div>
    </div>
    <div class="form-group row">
      <div class="form-title">config</div>
      <div class="col-md-6">
        <input type="text" class="form-control" name="config" [(ngModel)]="addTemplate.config">
      </div>
    </div>
    <div class="form-group clearfix">
      <div class="form-title">展示图上传</div>
      <div class="col-md-6">
        <div class="ui-file">
          <i class="iconfont icon-add"></i>
          上传图片
          <input class="ui-file-input" type="file" name="license" (change)="uploadImg($event,'temp')">
        </div>
        <div class="edvert-photo-warp">
          <img class="imgSize" src="{{img_url}}">
        </div>
        <p [hidden]="hasUploadTempImg" class="alert alert-danger">请上传展示图!</p>
      </div>
    </div>
    <div class="text-center" *ngIf="!hasSaveTemp">
      <button class="btn btn-success" [disabled]="!addTemplateForm.form.valid" (click)="addTemplateSubmit()">下一步</button>
    </div>
    <div class="form-group row" *ngIf="hasSaveTemp">
      <div class="form-title">模板内容</div>
      <div class="col-md-8">
        <div>
          <button class="btn btn-default" (click)="addModuleModal.show()">新增展位</button>
        </div>
        <table class="table">
          <thead>
            <tr>
              <th>排序号</th>
              <th>名称</th>
              <th>数量</th>
              <th>高度</th>
              <th>宽度</th>
              <th>图片</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of showcaseList">
            <td>{{item.sort}}</td>
            <td>{{item.name}}</td>
            <td>{{item.quantity}}</td>
            <td>{{item.height}}</td>
            <td>{{item.width}}</td>
            <td><img src="{{aliyunOssOutputUrl}}/{{item.url}}"></td>
            <td>
              <a href="javascript:;" (click)="editShowcaseDialog(item.id)">编辑</a>
              <a href="javascript:;" (click)="delShowcase(item.id)">删除</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </form>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
<!-- 新增展位 -->
<div class="modal fade" bsModal #addModuleModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新增展位</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addModuleModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addShowcaseForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-4">排序号</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="sort" [(ngModel)]="addShowcase.sort">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4">编号</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="booth_number" [(ngModel)]="addShowcase.booth_number">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>名称</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="name" #name="ngModel" [(ngModel)]="addShowcase.name" required>
              <p [hidden]="name.pristine || name.valid" class="alert alert-danger">展位名称不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>数量</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="quantity" #quantity="ngModel" [(ngModel)]="addShowcase.quantity" required>
              <p [hidden]="quantity.pristine || quantity.valid" class="alert alert-danger">展位数量不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>高度</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="height" #height="ngModel" [(ngModel)]="addShowcase.height" required>
              <p [hidden]="height.pristine || height.valid" class="alert alert-danger">展位url不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>宽度</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="width" #width="ngModel" [(ngModel)]="addShowcase.width" required>
              <p [hidden]="width.pristine || width.valid" class="alert alert-danger">展位url不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>示意图</label>
            <div class="col-md-8">
              <div class="ui-file">
                <i class="iconfont icon-add"></i>
                上传图片
                <input class="ui-file-input" type="file" name="license" (change)="uploadImg($event,'showcase')">
              </div>
              <div class="edvert-photo-warp">
                <img class="imgSize" src="{{showcaseImg_url}}">
              </div>
              <p [hidden]="hasUploadShowcaseImg" class="alert alert-danger">请上传展位示意图!</p>
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="addModuleModal.hide()">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addShowcaseForm.form.valid" (click)="showcaseSubmit()">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- 编辑展位 -->
<div class="modal fade" bsModal #editModuleModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新增模块</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editModuleModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editShowcaseForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>排序号</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="sort" #sort="ngModel" [(ngModel)]="addShowcase.sort" required>
              <p [hidden]="sort.pristine || sort.valid" class="alert alert-danger">排序号不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4">编号</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="booth_number" [(ngModel)]="editShowcase.booth_number">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>名称</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="name" #name="ngModel" [(ngModel)]="editShowcase.name" required>
              <p [hidden]="name.pristine || name.valid" class="alert alert-danger">展位名称不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>数量</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="quantity" #quantity="ngModel" [(ngModel)]="editShowcase.quantity" required>
              <p [hidden]="quantity.pristine || quantity.valid" class="alert alert-danger">展位数量不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>高度</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="height" #height="ngModel" [(ngModel)]="editShowcase.height" required>
              <p [hidden]="height.pristine || height.valid" class="alert alert-danger">展位url不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>宽度</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="width" #width="ngModel" [(ngModel)]="editShowcase.width" required>
              <p [hidden]="width.pristine || width.valid" class="alert alert-danger">展位url不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-4"><span class="c-red">*</span>示意图</label>
            <div class="col-md-8">
              <div class="ui-file">
                <i class="iconfont icon-add"></i>
                上传图片
                <input class="ui-file-input" type="file" name="license" (change)="editImg($event,'showcase')">
              </div>
              <div class="edvert-photo-warp">
                <img class="imgSize" src="{{showcaseImg_url}}">
              </div>
              <p [hidden]="hasUploadShowcaseImg" class="alert alert-danger">请上传展位示意图!</p>
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="editModuleModal.hide()">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!editShowcaseForm.form.valid" (click)="editShowcaseSubmit()">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- 是否确认删除 -->
<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">确认</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <p>确定删除吗？</p>
      </div>
      <div class="text-right mb20">
        <button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="button" (click)="delShowcaseSubmit()">确定</button>
      </div>
    </div>
  </div>
</div>
